<template>
  <view class="content">
    <template v-for="(img, index) in urls">
      <view class="img-wrapper">
        <image class="img" :src="img" :key="index" @click="onPreImg(img)" mode="aspectFill"></image>
        <view class="img-info">
          <text class="img-text">图片 {{index + 1}}</text>
        </view>
      </view>
    </template>
    <button @click="onPreImg">预览图片</button>
    <un-preview-image ref="unPreImg" @item-click="handlePreItemClick" @menu="handlePreMenu"></un-preview-image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
      allDownload: true,
      urls: [
        'http://192.168.31.150:8080/static/images/98e384903366cb12044ccab154bab84.jpg',
        'http://192.168.31.150:8080/static/images/6twme2qohvwcc1dnndjsycoap.jpg',
        'http://192.168.31.150:8080/static/images/5a3cb2c9c2779.jpg',
      ]
    }
  },
  onLoad() {

  },
  methods: {
    onPreImg(url) {
      this.$refs.unPreImg.show(this.urls, url)
    },
    handlePreItemClick() {
      this.$refs.unPreImg.close()
    },
    handlePreMenu(data) {
      uni.showActionSheet({
        itemList: ['保存图片'],
        success: (res) => {
          this.$refs.unPreImg.save(data).then(res => {
            uni.showToast({
              title: '保存成功',
              icon: 'none',
            })
          }).catch(() => {
            uni.showToast({
              title: '保存失败',
              icon: 'none',
            })
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.content {
  padding: 20rpx;
  width: 100%;
  box-sizing: border-box;

  .img-wrapper {
    width: 100%;
  }

  .img {
    width: 100%;
    height: 300px;
    border: 1px solid #ccc;
    border-radius: 20rpx;
  }

  .img-info {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }

  .img-text {
    font-weight: bolder;
  }
}
</style>
